@import "./fonts/FZZZHUNHJW/FZZZHUNHJW.css";

@line-color: #333;
@px: 16px;

.fullScreen{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    font-size: @px;
    background: #000 url(images/fullScreenBg.png) center top no-repeat;
    background-size: cover;
    overflow: hidden;
    .close{
        position: absolute;
        top: .1rem;
        right: .1rem;
        z-index: 2;
        width: .44rem;
        height: .44rem;
        line-height: .44rem;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .8);
        opacity: 0;
        cursor: pointer;
        i{
            font-size: .2rem;
        }
        &:hover{
            opacity: 1;
            background-color: rgba(0, 0, 0, .5);
        }
    }
    .title{
        position: absolute;
        left: 50%;
        top: .26rem;
        transform: translateX(-50%);
        height: .40rem;
        font-size: .40rem;
        line-height: .46rem;
        color: #14A0D3;
        font-family: "FZZZHUNHJW";
        text-align: center;
        padding: 0 1.80rem;
        white-space: nowrap;
        &::before,
        &::after{
            position: absolute;
            top: 0;
            content: '';
            width: 1.68rem;
            height: .40rem;
            background-repeat: no-repeat;
            background-size: auto .4rem;
        }
        &::before{
            left: 0;
            background-image: url('images/title_left.png');
            background-position: left center;
        }
        &::after{
            right: 0;
            background-image: url('images/title_right.png');
            background-position: right center;
        }
    }
    .box{
        position: relative;
        padding: .15rem .16rem;
        border-bottom: 1px solid #333;
        .commonTitle{
            color: #14B0E9;
            font-size: .16rem;
            margin-bottom: .10rem;
        }
    }
    .Map{
        position: absolute;
        top: 1.10rem;
        left: 50%;
        transform: translateX(-50%);
        height: 7.40rem;
        width: 10.00rem;
    }
    .Panel{
        &Top{
            position: absolute;
            top: 1.26rem;
            left: 5.40rem;
            width: 6.86rem;
            li{
                width: 1.06rem;
                height: .90rem;
                padding-top: .26rem;
                margin-right: .16rem;
                float: left;
                text-align: center;
                background: url(images/overviewService.png) center top no-repeat;
                background-size: 1.06rem .9rem;
                .tips{
                    font-size: .12rem;
                    line-height: .20rem;
                    color: #ccc;
                }
                .num{
                    font-size: .32rem;
                    line-height: .42rem;
                }
                &.wait .num{
                    color: #FF7200;
                }
                &.error-server .num{
                    color: #FFC000;
                }
                &.warning .num{
                    color: #FF4911;
                }
                &.error-user .num{
                    color: #14A0D3;
                }
            }
        }

        &Bottom{
            position: absolute;
            bottom: .20rem;
            left: 50%;
            transform: translateX(-50%);
            width: 6.86rem;
            height: 1.60rem;
            border: 1px solid @line-color;
            padding: .28rem 0;
            background: rgba(19, 20, 21, .85);
            border-radius: 3px;
            .list{
                li{
                    position: relative;
                    width: 33.33%;
                    height: .92rem;
                    font-size: .14rem;
                    float: left;
                    text-align: center;
                    &::before {
                        position: absolute;
                        content: "";
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 1px;
                        height: 100%;
                        background-color: #2B2B2B;
                    }
                    &:last-child::before {
                        display: none;
                      }
                    .name {
                        color: #999;
                    }
                    .num {
                        font-size: .32rem;
                        color: #14B0E9;
                        display: block;
                        line-height: .48rem;
                        height: .48rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .info {
                        font-size: .14rem;
                        color: #61686B;
                        i{
                            font-size: .20rem;
                            vertical-align: top;
                            &.icon-fall{
                                color: #00A317;
                            }
                            &.icon-rise{
                                color: #F71A1A;
                            }
                        }
                    }
                }
            }
        }

        &Left,&Right{
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 1;
            width: 4.50rem;
            height: 100%;
            background: url(images/grid.png) left top repeat;
            // .box:last-child{
            //     border-bottom: none;
            // }
        }
        &Left{
            left: 0;
            border-right: 1px solid @line-color;
        }
        &Right{
            right: 0;
            border-left: 1px solid @line-color;
        }
    }

    .custom-dark-tabs{
        .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar{
            border: none;
            margin-bottom: 0;
            .ivu-tabs-nav-scrollable {
                padding: 0 .26rem;
                font-size: .14rem;
                .ivu-tabs-nav-prev,
                .ivu-tabs-nav-next{
                    width: .22rem;
                    height: 0.32rem;
                    line-height: 0.32rem;
                    border-radius: .03rem;
                    border: 1px solid #333;
                    text-align: center;
                }
            }
            .ivu-tabs-tab{
                color: #666;
                border: 1px solid #333;
                background-color: #1c1f1f;
                border-radius:.05rem;
                font-size: .14rem;
                line-height: .32rem;
                height: .32rem;
                padding: 0 .1rem;
                &-active{
                    border-color: #286479;
                    color: #14B0E9;
                    box-shadow: none;
                    background-color: #0f2229;
                }
            }
        } 
    }

    .serverAnalysisList{
        width: 1.00rem;
        float: left;
        li{
            width:1.00rem;
            height:.56rem;
            padding:.04rem .06rem;
            border: 1px solid rgb(51,51,51);
            text-align: center;
            border-radius:.1rem;
            margin-bottom: .1rem;
            .label{
                font-size: .14rem;
                line-height: .20rem;
                white-space: nowrap;
                color: #61686B;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .value{
                color: #ccc;
                font-size: .24rem;
                line-height: .3rem;
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
    }

    .logList{
        height: 1.16rem;
        li{
            position: relative;
            height: .22rem;
            font-size: .14rem;
            line-height: .22rem;
            padding-right: 1.10rem;
            padding-left: .24rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #61686B;
            i{
                position: absolute;
                left: 0;
                font-size: .20rem;
                height: .22rem;
                line-height: .22rem;
            }
            .t-gray{
                color: #999;
            }
            .t-blue{
                color: #14B0E9;
            }
            .date{
                position: absolute;
                right: 0;
            }
        }
    }

    .loading{
        position: relative;
        text-align: center;
        top: 46%;
        font-size: .14rem;
        color: #15a0d3
    }
    .hasBorderStyle{
        &>span{
            position: absolute; 
            padding: .05rem; 
            z-index: 2; 
            border-style: solid; 
            border-color: #104062;
            &:nth-child(1), &:nth-child(2){ 
                top: -1px; 
            }
            &:nth-child(1), &:nth-child(4){ 
                left: -1px; 
            } 
            &:nth-child(2), &:nth-child(3){ 
                right: -1px; 
            } 
            &:nth-child(3), &:nth-child(4){ 
                bottom: -1px; 
            } 
            &:nth-child(1){ 
                border-width: .02rem 0 0 .02rem; 
            } 
            &:nth-child(2){ 
                border-width: .02rem .02rem 0 0; 
            } 
            &:nth-child(3){ 
                border-width: 0 .02rem .02rem 0; 
            } 
            &:nth-child(4){ 
                border-width: 0 0 .02rem .02rem; 
            }
        }
    } 
}